<template>
  <div class='detail-head ft14 pr'>
    <el-breadcrumb class="pa third-menu" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, index) in headData" :key="index" replace :to="item.to">{{item.label}}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="detailShow">详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button v-if="!hiddenbtn" v-for="(item, index) in btnsData" :key="index" :type="item.type" class="fr btn ft12 ml10" @click="doClick(item)" >{{item.label}}</el-button>
    {{getStatus}}
  </div>
</template>
<script>
import {headDatas,btnDatas} from './headData.js'
export default {
  props:['hiddenbtn'],
  components: {},
  name: "",
  data() {
    return {
      backpath:"",
      headData:[],//面包屑数据
      btnsData:[],
      detailShow:false,
    };
  },
  computed:{
    getStatus(){
      console.log(this.$store.state.orderState,'保存的状态');
    }
  },
  methods: {
    /**
     * @name 处理面包屑数据
     */
    getBackPath(){
      let path = _g.getRouterPath(this)
      this.detailShow = path.indexOf("detail")>-1?true:false
      this.backpath=path.replace(/\/detail*/,"")
      let goals=[]
      new Map(headDatas).forEach((val,key)=>{
        if(path.includes(key)){
          goals.push({
            label:val,
            to:goals.length>0?this.backpath:""
          })
        }
      })
      this.$set(this,'headData',goals)
    },

    /**
     * @name 处理按钮数据
     * @description 通过地址栏中的当前状态来判断 0表示
     */
    getBtnsData(){
      let path = _g.getRouterPath(this)
      let query = this.$router.history.current.query
      let index = parseInt(query.status)||0
      
      if([10,20,30,40,50].includes(index)){
        index=index/10
      }

      new Map(btnDatas).forEach((val,key)=>{
        if(path.includes(key)){
          this.$set(this,'btnsData',val.btns[index])
        }
      })
    },

    doClick(item){
        console.log(item.clickName,"clickNamesssf+++=")
      if(item.clickName)this.$emit(item.clickName)
      if(item.label2)this.$set(item,"label",item.label2==item.label?item.label1:item.label2)
      if(item.clickName2)this.$set(item,"clickName",item.clickName2==item.clickName?item.clickName1:item.clickName2)
    }
  },
  created() {
    this.getBackPath()
    this.getBtnsData()
  }
};
</script>
<style lang="scss" scoped>
.detail-head {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid #efefef;

  .third-menu{
    top: 50%;
    transform: translateY(-50%);
  }

  .btn{
    width: 100px;
    padding: 0 10px;
    height: 30px;
    margin-top: 10px;
    border-radius: 0;
  }
}
</style>